<template>
    <div>
        <el-card>
            <el-table
              :data="tableData"
              border
              style="width: 100%"
            >
                <el-table-column
                  label="编号"
                  width="68">
                  <template slot-scope="scope">
                    {{scope.$index + 1}}
                  </template>
                </el-table-column>
                <el-table-column
                  label="学生姓名"
                >
                  <template slot-scope="scope">
                    {{scope.row.account}}
                  </template>
                </el-table-column>
                <el-table-column
                  label="实验室名称"
                >
                  <template slot-scope="scope">
                    {{scope.row.labName}}
                  </template>
              </el-table-column>
              <el-table-column
                label="日期"
              >
                <template slot-scope="scope">
                  {{scope.row.day}}
                </template>
              </el-table-column>
              <el-table-column
                label="时间"
              >
                <template slot-scope="scope">
                  {{scope.row.timeSlotName}}
                </template>
              </el-table-column>
              <el-table-column
                label="实验名称"
              >
                <template slot-scope="scope">
                  {{scope.row.experimentName}}
                </template>
              </el-table-column>
            </el-table>

            <!-- 底部翻页器 -->
            <div class="pagination">
              <el-pagination
                  background
                  layout="total, prev, pager, next, jumper"
                  :pager-count="5"
                  :total="page.total"
                  :page-size="page.pageSize"
                  :current-page="page.currentPage"
                  @current-change="handleCurrentChange"
              >
              </el-pagination>
            </div>
        </el-card>
    </div>
</template>
<script>
import request from '@/utils/request'
export default {
  data() {
    return {
      tableData: [],
      page: {
        total: 10,
        pageSize: 10,
        currentPage: 1
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    handleCurrentChange(val) {
      this.page.currentPage = val
      this.getList()
    },
    getList() {
      request.get('/items/labAppointments', { params: {
        appointmentConditionId: this.$route.params.id,
        size: this.page.pageSize,
        current: this.page.currentPage
      }}).then(res => {
        this.tableData = res.content.records
        this.page.total = res.content.total
      })
    }
  }
}
</script>

<style>
.pagination {
  float: right;
  margin-bottom: 15px;
  margin-top: 15px;
}
</style>
